<template>
  <div class="entry_sound" :id="listData.id">
    <div class="list_text_title" v-if="listData.title" :class="{ show_time: recordTime }">
      <span class="text">
        {{ listData.title }}
      </span>
      <span class="time">{{ recordTime }}</span>
    </div>
    <div class="list_box">
      <div class="list_text_box">
        <!-- <div class="voice_box">
          <MyVoice
            v-for="(item, index) in listData.audioList"
            :audioId="item.id"
            :key="index"
            :audioData="item"
            @delete="deleteVoice"
            :isDelete="entry"></MyVoice>
        </div> -->
        <div class="list_text_input">
          <van-field
            class="scroe_input"
            v-model="listData.entryCont"
            :rows="fildeRow"
            autosize
            type="textarea"
            :placeholder="listData.placeholder || '请输入'"
            show-word-limit
            v-if="entry"
            :maxlength="listData.wordLimit" />
          <div
            v-else
            v-html="removeHtmlStyle(listData.entryCont || listData.content) || '无'"
            class="entry_cont pre_line"></div>
        </div>
      </div>
      <div class="list_voice_box" v-if="entry && showVoice">
        <VoiceBtnFlutter
          @recordend="recordend"
          v-if="['flutter-android', 'flutter-ios', 'flutter'].includes(platform)"></VoiceBtnFlutter>
        <VoiceBtn @recordend="recordend" v-else></VoiceBtn>
      </div>
    </div>
    <div class="overlay" v-show="switchFlag"></div>
  </div>
</template>

<script>
import MyVoice from '@com/MyVoice'
import VoiceBtn from '@com/VoiceBtn'
import VoiceBtnFlutter from '@com/VoiceBtnFlutter'
import { mapState } from 'vuex'
export default {
  name: 'BoardSound',
  components: {
    MyVoice,
    VoiceBtn,
    VoiceBtnFlutter,
  },
  props: {
    listData: {
      type: Object,
      default: () => {
        return {
          title: '标题',
          entryCont: '输入内容',
          audioList: [],
        }
      },
    },
    entry: {
      type: Boolean,
      default: true,
    },
    showVoice: {
      type: Boolean,
      default: true,
    },
    fildeRow: {
      type: Number,
      default: 6,
    },
    recordTime: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      input: '',
      switchFlag: false,
      poolData: '',
      poolShowNum: 1,
      btnOnly: true,
      platform: localStorage.platform,
    }
  },
  computed: {},
  watch: {
    entry(news) {
      console.log('entry :>> ', news)
    },
    showVoice(news) {
      console.log('showVoice :>> ', news)
    },
  },
  created() {},
  mounted() {},
  methods: {
    recordend(li) {
      let resData = JSON.parse(li)
      this.listData.entryCont = this.listData.entryCont + resData.entryCont
      this.$forceUpdate()
    },
    // 删除录音
    deleteVoice(e) {
      this.listData.audioList.splice(
        this.listData.audioList.findIndex(item => item.id === e.id),
        1
      )
    },
    removeHtmlStyle(html) {
      let rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
  },
}
</script>

<style lang="scss" scoped>
.entry_sound {
  background-color: #ffffff;
  box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
  width: 100%;
  border-radius: 5px;
  margin-bottom: 10px;
  // 标题
  .list_text_title {
    font-size: 14px;
    font-weight: bold;
    color: #a57d60;
    padding: 16px 14px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .text {
      background-image: linear-gradient(#ffffff 50%, #f9f1e8);
    }
    .time {
      font-weight: 400;
      font-size: 12px;
    }
  }
  .show_time {
    justify-content: flex-start;
  }
  .list_box {
    border-radius: 5px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;

    overflow: hidden;
    .list_text_box {
      flex: 1;
      // padding: 20px 16px 20px 16px;
      padding: 10px 14px;

      .voice_box {
        width: 100%;
      }
      .entry_cont {
        font-size: 13px;
        line-height: 21px;
        color: #333;
        word-break: break-all;
        user-select: text;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
      }
    }
    .scroe_input {
      padding: 0 5px;
      width: 100%;
      height: auto;
      line-height: 21px;
      font-size: 13px;
      resize: none;
    }

    .list_voice_box {
      border-left: 1px solid #efefef;
      width: 80px;
    }
  }
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }
}
</style>
